<!-- FAQ 常见问题 -->
<template>
  <s-layout class="set-wrap" title="客服问题" :bgStyle="{ color: '#FFF' }">
    <uni-collapse>
      <uni-collapse-item v-for="(item, index) in state.list" :key="item">
        <template v-slot:title>
          <view class="ss-flex ss-col-center header">
            <view class="ss-m-l-20 ss-m-r-20 icon">
              <view class="rectangle">
                <view class="num ss-flex ss-row-center ss-col-center">
                  {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }}
                </view>
              </view>
              <view class="triangle"> </view>
            </view>
            <view class="title ss-m-t-36 ss-m-b-36">
              {{ item.title }}
            </view>
          </view>
        </template>
        <view class="content ss-p-l-78 ss-p-r-40 ss-p-b-50 ss-p-t-20">
          <!-- <text class="text">{{ item.content }}</text> -->
          		  
         <mp-html class="richtext" :content="item.content" />
        </view>
      </uni-collapse-item>
    </uni-collapse>
	
	
	
	<s-empty
	  v-if="state.list.length === 0 && !state.loading"
	  text="暂无常见问题"
	  icon="/static/collect-empty.png"
	/>
	
	<su-fixed bottom :opacity="false" bg="bg-white" placeholder :noFixed="false" :index="200">
	  <view class="footer-box border-top ss-row-between ss-p-x-20 ss-col-center">
	 
		
		<button
			  class="ss-reset-button ui-BG-Main-Gradient ss-r-60 submit-btn ui-Shadow-Main  ss-margin-top-140  "
			  @tap="clickkf()"
			>
			 人工客服
			</button>
	
	  </view>
	</su-fixed>
	
	
	
   
  </s-layout>
  
  
 
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import sheep from '@/sheep';

  import ArticleApi from '@/sheep/api/promotion/article';
   const state = reactive({
     list: [	
 	],
     loading: true,
   });
 
   async function getFaqList() {
 	  
 	    const { code, data } = await ArticleApi.getArticlepage(4, 20);
 		// if (error === 0) {
 		//   state.list = data;
 		//   state.loading = false;
 		// }
 		
 		console.log(data)
 		state.list = data.list;
 		state.loading = false;
 		 console.log(state.list)
 		// return
     // const { error, data } = await sheep.$api.data.faq();
     // if (error === 0) {
     //   state.list = data;
     //   state.loading = false;
     // }
   }
   
   function clickkf(){
   	  
   	  uni.openCustomerServiceChat({
   	    extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc6e35310b3ffa067d'},
   	    corpId: 'wwa4df87d6707c847b',
   	    success(res) {
   			console.log(res)
   		}
   	  })
   	  
   	  console.log("客服")
   };
   onLoad(() => {
 	  
 	  getFaqList();
 	  return
 	  
 	  
     // TODO 芋艿：【文章】目前简单做，使用营销文章，作为 faq
     if (true) {
       sheep.$router.go('/pages/public/richtext', {
         title: '常见问题',
       })
       return;
     }
     getFaqList();
   });
</script>

<style lang="scss" scoped>
  .header {
    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 30rpx;
      max-width: 688rpx;
    }

    .icon {
      position: relative;
      width: 40rpx;
      height: 40rpx;

      .rectangle {
        position: absolute;
        left: 0;
        top: 0;
        width: 40rpx;
        height: 36rpx;
        background: var(--ui-BG-Main);
        border-radius: 4px;

        .num {
          width: 100%;
          height: 100%;
          font-size: 24rpx;
          font-weight: 500;
          color: var(--ui-BG);
          line-height: 32rpx;
        }
      }

      .triangle {
        width: 0;
        height: 0;
        border-left: 4rpx solid transparent;
        border-right: 4rpx solid transparent;
        border-top: 8rpx solid var(--ui-BG-Main);
        position: absolute;
        left: 16rpx;
        bottom: -4rpx;
      }
    }
  }

  .content {
    border-bottom: 1rpx solid #dfdfdf;

    .text {
      font-size: 26rpx;
      color: #666666;
    }
  }
</style>
